<template>
  <view v-if="memberId === 0" class="auth">
    <view style="margin-bottom: 40rpx">
      <u-input v-model="authData.code" maxlength="11" placeholder="请输入销售码" border />
    </view>
    <view style="margin-bottom: 40rpx">
      <u-input v-model="authData.telephone" maxlength="11" placeholder="请输入手机号" border />
    </view>
    <view style="margin-bottom: 40rpx">
      <u-input v-model="authData.memberName" maxlength="11" placeholder="请输入姓名" border />
    </view>
    <u-button type="success" @click="onBind">绑定</u-button>
  </view>
  <view v-else class="my-container">
    <view class="my-head">
      <view class="my-info">
        <image class="my-avatar" :src="info.avatarUrl" mode=""></image>
        <view class="my-info-content">
          <view class="my-info-item">
            <view class="mii-item my-name">{{ info.nickname }}</view>
            <view class="mii-item-integral">
              <view class="mii-item my-integral">积分: <text>{{ info.integral }}</text></view>
              <view class="mii-item my-integral">已兑: <text>{{ info.usedIntegral }}</text></view>
            </view>
            
          </view>
          <view class="my-info-item">
            <view class="mii-item my-proxy">{{ info.companyName }}</view>
            <view class="mii-item my-phone">{{ info.telephone }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="banner">
      <image src="https://qncdn2.dianhetech.com/wenzunbanner.jpg" mode="widthFix" class="banner-img"></image>
    </view>
    <view class="my-tools">
      <view class="my-tool-item" @click="onRoute('integral')">
        <view class="my-tool-name">
          <image src="../../static/assets/my-tool1.png" class="name-icon"></image>
          <text>积分记录</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
      <view class="my-tool-item" @click="onRoute('record')">
        <view class="my-tool-name">
          <image src="../../static/assets/my-tool2.png" class="name-icon"></image>
          <text>兑换记录</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
    </view>
    <!-- <view class="layout">
      <u-button type="error" @click="onLayout">重新登录</u-button>
    </view> -->
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        showMoney: false,
        info: {
          userInfo: {},
          wallet: {},
          agent: {},
        },
        authData: {},
      }
    },
    computed: {
      ...mapGetters(['memberId'])
    },
    onLoad() {
      console.log(this.memberId)
      this.getInfo()
    },
    methods: {
      getInfo() {
        this.$http({
          url: '/member/myMemberInfo'
        }).then(res => {
          this.info = res.data
        })
      },
      onRoute(name) {
        uni.navigateTo({
          url: `./${name}`
        })
      },
      onLayout() {
        uni.removeStorageSync('Token')
        this.$store.commit('setToken', '')
        uni.navigateTo({
          url: '../login/index'
        })
      },
      onViewArticle(id) {
        uni.navigateTo({
          url: '../article/detail?id=' + id
        })
      },
      onViewPopularize() {
        uni.navigateTo({
          url: '../tangkou/popularize'
        })
      },
      onBind() {
        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            success: (res) => {
              console.log(res)
              const { encryptedData, iv } = res
              this.onSaveUserInfo({ encryptedData, iv })
              this.onBindSale()
            }
        })
      },
      onSaveUserInfo(data) {
        this.$http({
          url: '/login/saveUserInfo',
          method: 'post',
          data,
        })
      },
      onBindSale() {
        if (!this.authData.code) {
          this.$u.toast('请输入销售码')
          return
        }
        if (!this.authData.telephone) {
          this.$u.toast('请输入手机号')
          return
        }
        if (this.authData.telephone.length !== 11) {
          this.$u.toast('请输入正确的手机号')
          return
        }
        if (!this.authData.memberName) {
          this.$u.toast('请输入姓名')
          return
        }
        this.$http({
          url: '/member/bindMember',
          method: 'post',
          data: this.authData,
        }).then(res => {
          this.$store.commit('setMemberId', res.data.memberId)
          this.$u.toast('绑定成功')
        }).catch(err => {
          this.$u.toast(err.msg || '绑定失败')
        })
      },
    }
  }
</script>

<style lang="less">
.my-container{
  min-height: 100vh;
  background: #fafafa;
}
.my-head{
  background: url(https://qncdn2.dianhetech.com/wenzuntop.jpg) no-repeat left top;
  background-size: 100% 100%;
  color: #333;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  
  
}

.my-info{
  display: flex;
  align-items: center;
  padding: 34rpx 0;
}

.my-avatar{
  display: block;
  width: 100rpx;
  height: 100rpx;
  margin-right: 10rpx;
  border-radius: 50%;
}
.my-info-content{
  flex: 1;
}
.my-info-item{
  display: flex;
}
.mii-item{
  font-size: 30rpx;
  line-height: 46rpx;
}
.mii-item-integral{
  margin-left: auto;
  display: flex;
}
.my-name{
  font-size: 34rpx;
  font-weight: bold;
}
.my-integral{
  margin-right: 20rpx;
  text{
    color: #cf1322;
  }
}
.my-phone{
  margin-left: 20rpx;
}


.banner{
  padding: 30rpx 20rpx 0;
  
  .banner-img{
    width: 100%;
  }
}
.my-tools{
  background: #fff;
  margin: 30rpx 0;
  padding-left: 20rpx;
  border-radius: 10rpx;
  .my-tool-item{
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #e8e8e8;
    padding-right: 30rpx;
    color: #666;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .my-tool-name{
    display: flex;
    align-items: center;
    .name-icon{
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }
  .my-tool-icon{
    display: block;
    width: 40rpx;
  }
}

.layout{
  padding: 40rpx 60rpx;
}

.auth{
  padding: 50rpx;
}
</style>
